import Base from "../Base.js";
import moviesApi from "../../api/movies.js";
import config from "../../util/config.js";

export default class extends Base {
  constructor(props) {
    super(props);
    const movies = moviesApi.getStorage();
    this.data = { movies };
  }

  async getMovies() {
    const data = await moviesApi.getOne(this.data.movies._id);
    Object.assign(this.data.movies, data);
    this.renrender();
  };
  mounted() {
    this.getMovies()
  };

  renrender() {
    $('#filePreview').html(`${this.data.movies.images.map(item =>
      `<img src="${config['resource_sever']}${item}" style="width: 100px;">`).join("")}`);
    if (this.data.movies.poster) {
      $('#filePoster').html(
        ` <img src="${config['resource_sever']}${this.data.movies.poster}" style="width: 100px;">`)
    } 
  }

  handle() {
    // 确认修改
    this.btn.on("click", async e => {
      switch (e.target.value) {
        case "确认修改":
          this.data.movies.isClassic = $(`input[name=isClassic]`).val();
          await moviesApi.update(this.data.movies);
          location.hash = "/info/movies-list";
          break;
      }
    });

    //获取被修改的值
    this.inputEles.on("input", e => {
      const ele = $(e.target);
      // arrt()规定要获取其值的属性
      const key = ele.attr("name");//获取被输入节点的name属性
      //获取被修改的属性的值
      this.data.movies[key] = ele.val();
    });
    this.texEles.on("input", e => this.data.movies.intro = e.target.value);

    //海报上传
    layui.upload.render({
      elem: '#test1'
      , url: '/resource/movies/poster',//改成您自己的上传接口
      // auto: false,
      multiple: true,
      // bindAction: '#submit',
      choose: function (obj) {
        //预读本地文件示例，不支持ie8
        obj.preview(function (index, file, result) {
          $('#filePoster').attr('src', result); //图片链接（base64）
        });
      },
      data: {
        _id: () => this.data.movies._id
      },
      done: res => {
        this.getMovies();
        //上传成功
      },
    });
    //多图上传
    layui.upload.render({
      elem: '#test2',
      url: "/resource/movies/upload",
      // auto: false,
      multiple: true
      // ,bindAction: '#submit'
      , data: {
        _id: () => this.data.movies._id,
        poster : this.data.movies.poster
      },
      done: res => {
        this.getMovies();
        //上传完毕
      }
    });
    // 单击删除图片
    $("#filePreview").on("click", "img", async e => {
      //eplace 提取图片的url路径
      const url = e.target.src.replace(config['resource_sever'], "");
      await moviesApi.removeImg({
        _id: this.data.movies._id,
        url
      });
      this.getMovies();
    })
  };

  render() {
    this.el.html(`
        <div class="movieAdd">
        <form class="layui-form movieAdd-from" action="#">
        <div style="display: flex;">
        <div style="width: 310px">
        
            <div class="layui-form-item movieAdd-item">
            <label class="layui-form-label">电影名</label>
            <div class="layui-input-inline">
              <input type="text" name="cname" lay-verify="required" value="${this.data.movies.cname}" autocomplete="off" class="layui-input">
            </div>
            </div>

          <div class="layui-form-item movieAdd-item">
          <label class="layui-form-label">英文名</label>
          <div class="layui-input-inline">
            <input type="text" name="ename" lay-verify="required" value="${this.data.movies.ename}" autocomplete="off" class="layui-input">
          </div>
         </div>

          <div class="layui-form-item movieAdd-item">
          <label class="layui-form-label">导演名字</label>
          <div class="layui-input-inline">
          <input type="text" name="director" lay-verify="required" value="${this.data.movies.director}" autocomplete="off" class="layui-input">
          </div>
          </div>

          <div class="layui-form-item movieAdd-item">
          <label class="layui-form-label">演员名字</label>
          <div class="layui-input-inline">
          <input type="text" name="actor" lay-verify="required" value="${this.data.movies.actor}" autocomplete="off" class="layui-input">
          </div>
          </div>

          <div class="layui-form-item movieAdd-item">
          <label class="layui-form-label">类型</label>
          <div class="layui-input-inline">
            <input type="text" name="type" lay-verify="required" value="${this.data.movies.type}" autocomplete="off" class="layui-input">
          </div>
         </div>

         <div class="layui-form-item">
                <label class="layui-form-label">是否经典</label>
                <div class="layui-input-block">
                  <input type="radio" name="isClassic" value="true" title="是">
                  <input type="radio" name="isClassic" value="false" title="否">
                </div>
              </div>

         <div class="layui-form-item movieAdd-item">
         <label class="layui-form-label">电影评分</label>
         <div class="layui-input-inline">
           <input type="number" name="score" lay-verify="required" value="${this.data.movies.score}" autocomplete="off" class="layui-input">
         </div>
         </div>
         <div class="layui-form-item movieAdd-item">
         <label class="layui-form-label">电影票房</label>
         <div class="layui-input-inline">
           <input type="text" name="count" lay-verify="required" value="${this.data.movies.count}" autocomplete="off" class="layui-input">
         </div>
         </div>

          <div class="layui-form-item movieAdd-item">
          <label class="layui-form-label">电影时长</label>
          <div class="layui-input-inline">
            <input type="number" name="time" lay-verify="required" value="${this.data.movies.time}" autocomplete="off" class="layui-input">
          </div>
          </div>

          <div class="layui-form-item movieAdd-item">
          <label class="layui-form-label">上映时间</label>
          <div class="layui-input-inline">
            <input type="text" name="upDate" lay-verify="required" value="${this.data.movies.upDate}" autocomplete="off" class="layui-input">
          </div>
         </div>
        <div class="layui-form-item movieAdd-item">
        <label class="layui-form-label">首映地区</label>
        <div class="layui-input-inline">
          <input type="text" name="area" lay-verify="required" value="${this.data.movies.area}" autocomplete="off" class="layui-input">
        </div>
        </div>
      </div> 

      <div style="margin-left:35px;width:252px">
      <div class="layui-upload">
        <button type="button" class="layui-btn" id="test1">海报</button>
        <div class="layui-upload-list" id="filePoster" style = "width:100px; height:140px; border: 1px solid #cdcdcd" ></div>
      </div> 

      <div class="layui-upload">
      <button type="button" class="layui-btn layui-btn-normal" id="test2">相关图片</button> 
      <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
        <div class="layui-upload-list" id="filePreview">
        
        </div>
    </blockquote>
    </div> 
</div>  
</div>
  
  <div class="layui-form-item layui-form-text">
  <label class="layui-form-label">剧情简介</label>
  <div class="layui-input-block">
    <textarea name="intro" value="" class="layui-textarea">${this.data.movies.intro}</textarea>
  </div>
</div>


<div class="layui-form-item">
  <div class="layui-input-block">
  <input type="button"  class="layui-btn" id="submit"  value="确认修改"> 
  </div>
</div>
    </form>
    </div>   
        `);
    layui.form.render()
    $(".movieAdd").css({
      width: "600px",
      margin: "auto",
      color: "#000",
      backgroundColor: "#fff",
      padding: "20px",
      opacity: 0.7
    })
    $(".layui-form-item").css({
      marginTop: "10px",
      marginBottom: "0px"
    })
    $(".layui-textarea").css({
      width: "450px"
    });
    $(".layui-upload-img").css({
      width: "92px",
      height: "128px",
      margin: "0 10px 10px 0",
    })
    this.btn = $(".layui-btn");
    this.inputEles = $(".layui-input")//获取表格所有的input节点
    this.texEles = $(".layui-textarea");//获取剧情简介
    this.isClassicEles = $("input[isClassic]")
  }
}
